<style lang='scss' scoped>
@import "@/assets/css/variable";
.staffManage {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  .header-box {
    border-bottom: 1px solid $border-c;
    background-color: white;
    padding: 1.4rem 1.7rem;
    .title {
      font-size: 1.8rem;
      margin-bottom: 5px;
    }
  }
  .list-box {
    background-color: white;
    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.7rem;
      border-bottom: 1px solid $border-c;
      .item-right {
        display: flex;
        align-items: center;
        .button {
          margin-left: 5px;
          border-radius: 8px;
        }
      }
    }
  }
  .add-box {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
<template>
  <div class="staffManage padding-all-m">
    <BarNav></BarNav>
    <div class="header-box border-r-l">
      <div class="title t-bold">员工信息</div>
      <!-- <div>当前共计<i>1</i>个学员</div> -->
    </div>
    <div class="list-box border-r-l margT-l" v-if="list && list.length > 0">
      <div class="item" v-for="(item, index) in list" :key="index">
        <span>{{ item.name }}</span>
        <div class="item-right">
          <a :href="`tel:${item.mobile}`">{{ item.mobile }}</a>
          <van-button
            @click="delClick(item.id)"
            class="button"
            size="mini"
            type="info"
            :color="$store.getters.getMasterColor"
            v-if="userInfo.boss_status == 1"
            >删除</van-button
          >
          <van-button
            @click="palyClick(item)"
            class="button"
            size="mini"
            type="info"
            :color="$store.getters.getMasterColor"
            v-if="userInfo.boss_status == 1"
            >查看业绩</van-button
          >
        </div>
      </div>
    </div>
    <div v-else class="no-data padding-all-l color-s">暂无员工</div>
    <div class="add-box margT-l b-center">
      <van-button
        style="border-radius: 8px"
        :color="$store.getters.getMasterColor"
        block
        @click="refreshList"
        >刷新列表</van-button
      >
    </div>
    <div class="add-box margT-l b-center">
      <!-- <van-button :color="$store.getters.getMasterColor" block>添加核销员</van-button> -->
      <canvas class="qrcode margT-l" id="qrCode-canvas"></canvas>
      <div class="color-l padding-all-l">Tips:微信扫码即可添加为员工</div>
    </div>
  </div>
</template>

<script>
import { Button, Icon, Toast, Dialog } from "vant";
import QRCode from "qrcode";
import BarNav from "@/components/BarNav"
export default {
  name: "StaffManage",
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    BarNav
  },
  data() {
    return {
      toUrl: "",
      userInfo: "",
      list: [],
      pageNo: 1,
      pageSize: 10,
    };
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo;
    if (!this.userInfo.id) {
      this.$router.replace("my");
    }
    this.getVerificationPage();
    this.$nextTick(() => {
      this.createQrcode();
    }, 500);
  },
  methods: {
    palyClick(item) {
      console.log(item);
      this.$store.commit('setEmployee', item)
      this.$router.push("/staffActivity?from='boss'");
    },
    refreshList() {
      this.getVerificationPage();
    },
    getVerificationPage() {
      let toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        merchant_id: this.userInfo.id,
        pageNo: 1,
        pageSize: 10000,
      };
      this.$request.getStaffPage(params).then((res) => {
        this.list = res.data.data;
        console.log(this.list, "list");
        toast.clear();
      });
    },
    createQrcode() {
      let href = `${location.protocol}//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html#/AddEmployee?merchant_id=${this.userInfo.id}`;
      let canvas = document.getElementById("qrCode-canvas");
      QRCode.toCanvas(canvas, href, (error) => {
        if (error) {
          console.log(error);
        } else {
          canvas.style.width = "12rem";
          canvas.style.height = "12rem";
        }
      });
    },
    delClick(id) {
      let params = { id };
      console.log(111);
      Dialog.alert({
        title: "系统提示",
        message: "要删除员工信息吗?",
        closeOnClickOverlay: true
      }).then(() => {
        this.$request.getStaffDel(params).then((res) => {
          console.log(res);
          Toast("删除成功");
          this.getVerificationPage();
        });
      });
    },
  },
};
</script>